<template>
  <div class="base-container">
    <t-row>
      <t-col :span="3" style="padding-right: 10px">
        <t-card bordered :style="{ overflow: 'hidden' }">
          <t-input
            style="margin-bottom: 10px"
            clearable
            placeholder="请输入单位名称"
            v-model="deptName"
            @change="deptNameTreeFilter"
          >
            <template #prefix-icon>
              <t-icon name="search" class="icon" size="16" />
            </template>
          </t-input>
          <t-tree
            activable
            :value.sync="deptNameTreeValue"
            :data="deptOptions"
            :keys="{ value: 'id' }"
            @click="handleNodeClick"
            :expandAll="true"
            :filter="filterByText"
            hover
            :expand-on-click-node="false"
          />
        </t-card>
      </t-col>
      <t-col :span="9">
        <div v-show="queryParams.deptId">
          <!-- <div v-if="tabList.length === 0"> -->
          <div>
            <t-card title="为该单位分配表单" header-bordered>
              <template #actions>
                <t-space>
                  <t-button @click="selecteAll" theme="default">全选</t-button>
                  <t-button @click="bindTableToUnit" :disabled="!selectedTable.length">绑定表单</t-button>
                </t-space>
              </template>
              <t-checkbox-group v-model="selectedTable" style="width: 100%">
                <!-- <t-space direction="vertical"> -->
                  <t-checkbox v-show="false"></t-checkbox>
                  <div v-for="table in allTableInfo" :key="table.id" class="line">
                    <t-checkbox :value="table.id" style="padding-left: 20px">{{table.name}}</t-checkbox>
                    <!-- <t-button size="small" style="margin: 5px" v-if="curDeptCheckedTable.includes(table.id)">查看</t-button> -->
                  </div>
                <!-- </t-space> -->
              </t-checkbox-group>
            </t-card>
          </div>
          <!-- <t-card v-else>
            <t-tabs v-model="tabIdx" :list="tabList" />
          </t-card> -->
        </div>
        <div v-show="!queryParams.deptId">
          <b>请先选择单位</b>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script lang="jsx">
import { treeselect } from '@/api/system/dept';

export default {
  name: 'home',
  data() {
    return {
      deptName: '',
      deptNameTreeValue: [],
      deptOptions: undefined,
      filterByText: null,
      dataLoading: false,
      queryParams: {
        deptId: '',
        years: new Date().getFullYear(),
      },
      tabIdx: 1,
      allTableInfo: [],
      selectedTable: [],
      curDeptCheckedTable: [],
      tabList: [
        // {
        //   label: '选项卡一',
        //   value: 1,
        //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
        //   panel: (h) => <p style="padding: 25px">这是选项卡一的内容，使用 t-tabs 渲染</p>,
        // },
        // {
        //   label: '选项卡二',
        //   value: 2,
        //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
        //   panel: (h) => <p style="padding: 25px">这是选项卡二的内容，使用 t-tabs 渲染</p>,
        // },
        // {
        //   label: '选项卡三',
        //   value: 3,
        //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
        //   panel: (h) => <p style="padding: 25px">这是选项卡三的内容，使用 t-tabs 渲染</p>,
        // },
      ],
    };
  },
  computed: {},
  created() {
    this.getTreeselect();
    this.getAllTableInfo();
  },
  methods: {
    getAllTableInfo() {
      this.$api.kjtjdc.table.getTableList()
        .then(({ code, rows, msg }) => {
          if (code === 500) throw msg
          this.allTableInfo = rows;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    getTreeselect() {
      treeselect()
        .then((res) => {
          this.deptOptions = res.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    getTables() {
      const { deptId, years } = this.queryParams;
      this.$api.kjtjdc.manage.getTableByUnitId(deptId, years).then(({data}) => {
        // const tableList = []
        const selectedTableIds = data.map(e => e.tableId)
        const checked = this.allTableInfo.filter(tab => selectedTableIds.includes(tab.id)).map(e => e.id)
        this.selectedTable = checked
        this.curDeptCheckedTable = checked
        // data.forEach(tab => {
        //   this.$api.kjtjdc.manage.getTableInfo(tab.tableId).then(({data}) => {
        //     tableList.push({
        //       label: data.name,
        //       value: data.id,
        //       panel: () => {
        //         if (data.name === '单位基本信息') return <table1></table1>
        //         return <table2></table2>
        //       }
        //     })
        //     this.tabIdx = tableList[0]?.value
        //   })
        // })
        // this.tabList = tableList
      });
    },
    deptNameTreeFilter() {
      if (this.deptName) {
        this.filterByText = (n) => n.data.label.indexOf(this.deptName) > -1;
      } else {
        this.filterByText = null;
      }
    },
    handleNodeClick(cxt) {
      this.queryParams.deptId = cxt.node.data.id;
      this.getTables();
    },
    tabChange(newIdx) {
      this.tabIdx = newIdx;
    },
    bindTableToUnit() {
      const { queryParams, selectedTable, $message, getTables } = this
      this.$api.kjtjdc.manage.addTablesForUnit({unitId: queryParams.deptId, tableIds: selectedTable }).then(res => {
        if (res.code === 200) {
          $message.success('绑定成功')
          getTables()
        } else {
          $message.error('绑定失败！请联系管理员')
        }
      })
    },
    selecteAll() {
      const ids = this.allTableInfo.reduce((pre, cur) => {
        pre.push(cur.id)
        return pre
      }, [])
      this.selectedTable.push(...ids)
    }
  },
};
</script>

<style lang="less" scoped>
.line {
  display: flex;
  width: 100%;
  justify-content: space-between;
  &:hover {
    background: #e7e7e7;
  }
}
</style>
